<template>
	<!-- 检测建议 -->
	<div class="suggest">
		<div class="title">
			<div class="flex flex-h">
				<h3 class="m-header">检测建议</h3>
				<span class="green btn" v-if="type == 'success'">{{rank}}</span>
				<span class="red btn" v-if="type == 'failed'">{{rank}}</span>
			</div>
			<div class="right flex flex-h" @click="goto()">
				视力报表
				<i class="fa fa-angle-right"></i>
			</div>
		</div>
		<p class="content" v-if="rank == '合格'">{{name}}同学，在此次视力检测中，您的检测结果合格，继续保持哦！</p>
		<p class="content" v-if="rank == '不合格'">{{name}}同学，在此次视力检测中，您的检测结果不合格，希望你以后能多加注重眼睛视力的保护，多吃红萝卜和有机蔬菜，补充睡眠。加油喔！</p>
		<p class="content" v-if="rank == '未检测'">{{name}}同学，您还没有视力检测哦！</p>
	</div>
</template>

<script>
export default {
	props:["name","type","rank"],
	data () {
		return {

		}
	},
	methods:{
		goto:function(){
			this.$router.push({
				path:'/eyeReport',
				query:{
					studentUid:this.common.getCookie('studentUid'),
					planId:this.common.getCookie('planId')
				}
			})
		}
	},
	mounted:function(){

	}
}
</script>

<style lang="scss" scoped>
	// 体质建议
	.suggest{
		margin: 15px;
		padding: 15px;
		background-color: #fff;
		box-shadow:0 0 5px #ccc;
		border-radius: 6px;
		.title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 15px;
			border-bottom: 1px solid #eee;
			.btn{
				padding: 6px 15px;
				border-radius: 6px;
				color: #fff;
				font-size: 14px;
				margin-left: 5px;
			}
			.green{
				background-color: #00CC00;
			}
			.red{
				background-color: #FF4D4D;
			}
			.right{
				font-size: 13px;
				color: #666;
				i{
					margin-left: 4px;
				}
			}
		}
		.content{
			padding-top: 10px;
		}
	}
</style>
